import React, { Component } from 'react';

import { NavBar, SearchBar, } from 'antd-mobile'
import "../styles/Search.scss"
import * as service from "../api/index"

class Search extends Component {
    constructor(props) {
        super(props);
        this.state = {
            zuijin: [],
            add: '',
            remen: []
        };
    }
    async componentDidMount() {
        var res = await service.hotword()
        // console.log(res.data.data.keyword);
        this.setState({ remen: res.data.data })
    }


    render() {
        return (
            <div className='search'>
                <ul className="top">
                    <li>
                        <NavBar onBack={() => { this.props.history.go(-1) }}>
                            <SearchBar placeholder='请输入内容' value={this.state.add}
                                onChange={value => {
                                    // console.log(value);
                                    this.setState({ add: value })
                                }} />
                        </NavBar></li>
                    <li>
                        <span onClick={(e) => {
                            this.state.zuijin.push(this.state.add)
                            this.setState({ add: '' })
                            // console.log(this.state.zuijin);
                            this.props.history.push({ pathname: '/Search_xiang', state: this.state.add });//跳路由传参
                            // console.log(this.state.add);

                        }}>搜索</span></li>
                </ul>
                <div className="zuijin">
                    <h2>最近搜索 <span>🗑</span></h2>
                    <div className="ssp">
                       
                        {
                            this.state.zuijin?.map((item, index) => {
                                return (
                                    <span key={index}>{item}</span>
                                )
                            })
                        }
                    </div>

                </div>
                <div className="remen">
                    <h2>热门搜索</h2>
                    <div className="ssp">
                        {
                            this.state.remen?.map((item, index) => {
                                return (
                                    <span key={index} onClick={(e) => {
                                        this.props.history.push({ pathname: '/Search_xiang', state: e.target.innerText });//跳路由传参
                                        // console.log(e.target.innerText);

                                    }}>{item.keyword}</span>
                                )
                            })
                        }
                    </div>

                </div>
            </div>
        );
    }
}

export default Search;
